<template>
  <div class="header">
    <div class="header-top">
      <div class="left">
        <el-button icon="el-icon-s-fold" v-show="isShow" @click="controlDirect()"/>
        <el-button icon="el-icon-s-unfold" v-show="!isShow" @click="controlDirect()"/>
      </div>
      <div class="left" >
        <BreadCrumb/>
      </div>
      <div class="right">
        <el-dropdown @command="logout">
          <div class="avatar-box">
            <el-image :src="UserInfo.user.avatar||imgAvatar" style="width: 40px; height: 40px;" @click="changeArrow()"/>
            <i class="el-icon-arrow-down" v-show="imgArrow"/>
            <i class="el-icon-arrow-up" v-show="!imgArrow"/>
          </div>
          <el-dropdown-menu>
            <el-dropdown-item><router-link to="/">用户信息</router-link></el-dropdown-item>
            <el-dropdown-item>退出登陆</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="header-bottom">
      <TagsList></TagsList>
    </div>
  </div>

</template>

<script>

import {mapMutations} from "vuex";
import BreadCrumb from "@/components/crumb/BreadCrumb.vue";
import {params} from "@/enums/PublicEnums";
import TagsList from "@/components/tags/TagsList.vue";

export default {
  name: 'HeaderView',
  data(){
    return{
      isShow:false,
      imgArrow: false,
      UserInfo:{
        permissions: [],
        user: {},
        roles: []
      },
      imgAvatar: params.defaultUserAvtar,
    }
  },
  components:{
    TagsList,
    BreadCrumb
  },
  methods:{
    //变更左侧菜单栏
    controlDirect(){
      this.isShow=!this.isShow
      this.setCollapse()
    },
    //变更头像上下箭头
    changeArrow(){
      this.imgArrow=!this.imgArrow
    },
    //更新状态的值
    ...mapMutations('navOptions',[params.setCollapse]),
    logout(){
      console.log("退出登陆1")
      localStorage.removeItem(params.token);
      this.$router.push('/login');
      this.$message.success('退出成功');
    }
  },
  created() {
    this.UserInfo=JSON.parse(localStorage.getItem(params.userinfo))
  }
}
</script>


<style lang="less" scoped>
    .header{
        height: 84px;
        box-shadow: 0px 5px 5px #eee;
        button{
          width: 50px;
          height: 50px;
          margin: 0;
          font-size: 24px;
          padding: 12px 10px;
          border: none;
        }
        .header-top{
          height: 50px;
          box-shadow: 0px 4px 4px #eee;
        }
        .left{
          float: left;
        }
        .right{
          float: right;
        }
      .avatar-box{
        padding: 5px 20px 0 0;
        ::v-deep .el-image__inner{
          border-radius: 10px;
        }
      }
    }
</style>
